<template>
	<view class="container container_create">
		<view class="orderlsitTab">
			<view :class="currentTab==1?'tabhover':''" @click="onTab(1)">未开始</view>
			<view :class="currentTab==2?'tabhover':''" @click="onTab(2)">进行中</view>
			<view :class="currentTab==3?'tabhover':''" @click="onTab(3)">已发放</view>
			<view :class="currentTab==4?'tabhover':''" @click="onTab(4)">已下架</view>
		</view>
		<view class="order_list">
			<!-- start  未开始  进行中 -->
			<view v-if="currentTab==1||currentTab==2">
				<view class="orderststatelist" v-for="(item,index) in list" :key="index">
					<view class="order_title_time">
						<text>{{item.s_time}}~{{item.e_time}}</text>
						<view v-if="currentTab==1" @click="delTap(item.id)" >下架</view>
					</view>
					<view class="order_red_content">
						<image src="/static/imgs/red.png" class="order_red_img"></image>
						<view class="order_red_mune">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- end -->

			<!-- start 已发放  已下架-->
			<view v-if="currentTab==3||currentTab==4">
				<view class="orderststatelist" v-for="(item,index) in list" :key="index">
					<view class="order_title_time">
						<text>{{item.s_time}}~{{item.e_time}}</text>
						<view @click="delTap(item.id)">删除</view>
					</view>
					<view class="order_list_content">
						<view v-if="item.red_info!=undefined">
							<view><image src="/static/imgs/money1.png"></image>{{item.red_info.name}}：</view>
							<text>{{item.red_info.red_num}}人已领 | 剩余{{item.red_info.residue}}个</text>
						</view>
						<view v-if="item.red_store_info!=undefined">
							<view><image src="/static/imgs/money2.png"></image>{{item.red_store_info.name}}：</view>
							<text>{{item.red_store_info.use_sole_red}}人已领 | 领取{{item.money}}元 | 剩余{{item.red_store_info.residue}}元</text>
						</view>
						<view v-if="item.coupon_info!=undefined">
							<view><image src="/static/imgs/money3.png"></image>{{item.coupon_info.name}}：</view>
							<text>{{item.coupon_info.useCoupon}}人已领 | 剩余{{item.coupon_info.residue}}个</text>
						</view>
					</view>
					<view class="order_fanhui" v-if="item.red_store_info!=undefined">
						{{item.red_store_info.residue}}元已原路返回账户中
					</view>
				</view>
			</view>
			<!-- end -->
			
			<view class="mode">{{tishi_title}}</view>
		</view>
	</view>
</template>

<script>
	import http from "@/common/js/request.js"
	export default {
		data() {
			return {
				currentTab:1,
				currentPage:1,
				list:[],
				ready: 2,
				tishi_title: "",
			}
		},
		onLoad() {
			this.couponlistTap();
		},
		methods: {
			onTab(index){
				
				this.currentTab=index;
				this.list = [];
				this.currentPage = 1;
				this.couponlistTap();
			},
			couponlistTap(){
				var that=this;
				http.post("api/store/store/Coupon_list",{
					page:that.currentPage,
					status:that.currentTab
				},function(res){
					console.log(res)
					var allpost = that.list;
					if (allpost == undefined) {
						allpost = [];
					}
					for (var i in res.datas) {
						
						allpost.push(res.datas[i])
					}
					if (res.datas.length < 10) {
						that.tishi_title = "已加载全部"
					} else {
						that.tishi_title = "正在加载中..."
					}
					that.list =allpost;
					that.ready = res.datas.length == 0 ? 1 : 2;
				})
			},
			//删除
			delTap(id){
				console.log(id)
				var that=this;
				http.post("api/store/store/Coupon_del",{
					id:id
				},function(res){
					console.log(res);
					if(res.state==1){
						uni.showToast({
							title:res.datas
						})
						setTimeout(function() {
							that.list = [];
							that.currentPage = 1;
							that.couponlistTap();
						}, 500);
					}else{
						uni.showModal({
							title:"提示",
							content:res.datas,
							showCancel:false
						})
					}
				})
			},
			onReachBottom() {
				console.log("sdlkjfkl");
				var that = this;
				if (that.ready == 2) {
					that.currentPage = that.currentPage + 1
					that.couponlistTap();
				}
			},
			onPullDownRefresh() {
				var that = this;
				that.list = [];
				that.currentPage = 1;
				that.couponlistTap();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			}
		},
		
	}
</script>

<style>
	page{
			background: #f9f9f9;
	}
	.container_create{
		background: #f9f9f9;
		position: relative;
		height: 100%;
		width: 100%;
	}
	.orderlsitTab {
		width: 750rpx;
		height: 107rpx;
		line-height: 107rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(228, 228, 228, 0.35);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 9999999999;
	}

	.orderlsitTab view {
		font-size: 30rpx;
	}

	.tabhover {
		border-bottom: 6rpx solid #FF9D11;
		color: #FF9D11;
	}

	.orderststatelist {
		width: 685rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3rpx 10rpx 1rpx rgba(230, 228, 228, 0.29);
		border-radius: 10rpx;
		margin: 30rpx auto 0;
		overflow: hidden;
	}

	.order_title_time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 72rpx;
		line-height: 72rpx;
		color: #818181;
		font-size: 28rpx;
		border-bottom: 1px solid rgba(241, 239, 239, 1);
		padding: 0 20rpx;
	}

	.order_title_time view {
		width: 152rpx;
		height: 56rpx;
		border: 1rpx solid rgba(255, 157, 17, 1);
		border-radius: 10rpx;
		color: #FF9D11;
		text-align: center;
		line-height: 56rpx;
		margin-top: 8rpx;

	}

	.order_red_content {
		width: 655rpx;
		height: 238rpx;
		margin: 15rpx auto 50rpx;
		position: relative;
	}

	.order_red_img {
		width: 100%;
		height: 100%;
	}

	.order_red_mune {
		width: 655rpx;
		height: 238rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.order_red_mune text {
		display: block;
		text-align: center;
		font-size: 30rpx;
		color: #ffff;
		width: 380rpx;
		line-height: 53rpx;
		margin-left: 130rpx;
		margin-top: 40rpx;
	}
	.order_list{
		margin-top: 107rpx;
	}
	.order_list_content{
		padding: 30rpx 20rpx;
	}
	.order_list_content>view{
		display: flex;
		flex-direction: row;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.order_list_content>text{
		font-size: 38rpx;
	}
	.order_list_content>view:nth-child(1) image{
		width: 39rpx;
		height: 38rpx;
		display: inline-block;
		vertical-align:-8rpx;
		margin-right: 10rpx;
	}
	.order_list_content>view:nth-child(2) image{
		width: 39rpx;
		height: 30rpx;
		display: inline-block;
		vertical-align:-1rpx;
		margin-right: 10rpx;
	}
	.order_list_content>view:nth-child(3) image{
		width:40rpx;
		height: 36rpx;
		display: inline-block;
		vertical-align:-6rpx;
		margin-right: 10rpx;
	}
	.order_fanhui{
		height: 92rpx;
		line-height: 92rpx;
		font-size: 28rpx;
		color: #FF9D11;
		text-align: right;
		padding: 0 16rpx;
		border-top:1px solid rgba(246,246,246,1);
	}
</style>
